<template>
	<view class="status-tabs">
		<view 
			v-for="(item, index) in tabs" 
			:key="index"
			:class="['tab-item', value === index ? 'active' : '']"
			@tap="handleTabChange(index)"
		>
			<text>{{item.name}}</text>
			<text class="count" v-if="showCount">({{item.count}})</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'OrderStatusTabs',
		props: {
			tabs: {
				type: Array,
				required: true
			},
			value: {
				type: Number,
				default: 0
			},
			showCount: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			handleTabChange(index) {
				this.$emit('input', index)
				this.$emit('change', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
.status-tabs {
	display: flex;
	background-color: #fff;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #eee;
	
	.tab-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;
		font-size: 28rpx;
		color: #666;
		position: relative;
		
		.count {
			font-size: 24rpx;
			margin-left: 4rpx;
		}
		
		&.active {
			color: #2979ff;
			font-weight: 500;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 4rpx;
				background-color: #2979ff;
				border-radius: 2rpx;
			}
		}
	}
}
</style> 